

  :global{
    @keyframes tiaodongLoading1 {
      0% {
        opacity: 0;
        transform:translateY(0%);
      }
        100% {
        opacity: 1;
        transform:translateY(-200%);
      }
    }
 
  .videoConBox_cyr{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 150px;
    overflow: hidden;
    .ralBox{
      width: 100%;
      height: 100%;
      position: relative;
    }
    .loadingBox{
      width: 100%;
      height: 100%;
      padding: 34px 20px;
      box-sizing: border-box;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 22;
      transform:translateZ(100px);
      visibility: hidden;
      opacity: 0;
      transition: all 0.4s;
      .loadingConBox{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2);
        position: relative;
      }
      .loadItem{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
        top: 50%;
        left: 50%;
        margin-top: -3px;
        position: absolute;
        transform:translateY(0%);
        opacity: 0;
      }
      .loadItem1:local{
        margin-left: -33px;
        animation: tiaodongLoading1 0.8s 0s infinite alternate linear forwards;
      }
      .loadItem2:local{
        margin-left: -13px;
        animation: tiaodongLoading1 0.8s 0.2s  infinite alternate linear forwards;
      }
      .loadItem3:local{
        margin-left: 7px;
        animation: tiaodongLoading1 0.8s 0.4s infinite alternate linear forwards;
      }
      .loadItem4:local{
        margin-left: 27px;
        animation: tiaodongLoading1 0.8s 0.8s infinite alternate linear forwards;
      }
    }
    .videoBox{
      height: 72%;
      margin-top: 4%;
      margin-bottom: 4%;
      width: 100%;
      overflow: hidden;
      position: relative;
    
      .playBtn{
        width: 120px;
        height: 120px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 22;
        transition: all 0.4s;
        opacity: 0;
        visibility: hidden;
      }
      .showbox{
        visibility: visible!important;
        opacity: 1!important;
      }
      .stopBtn{
        width: 84px;
        height: 84px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 20;
      }
      .videoCon{
        height: 100%;
        width: 100%;
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 2;
      }
      .phoneBgBox{
        height: 100%;
        position: absolute;
        z-index: 2;
        top: 0px;
        left: 50%;
        transform: translate(-50%,0%);
      }
      .phoneBox{
        height: 90%;
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 15;
      }
      .vConImgBox{
        position: absolute;
        height: 85.2%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 10;
        // border-radius: 30px;
        overflow: hidden;
      }
      .videoImgBox{
        height: 100%;
        z-index: 1;
        position: relative;
        transition: all 0.4s;
        opacity: 0;
        visibility: hidden;
      }
      .videoImgBoxPosition{
        position: absolute;
        transition: all 0.4s;
        opacity: 0;
        visibility: hidden;
        z-index: 10;
        height: 100%;
        width: 100%;
        left: 0px;
        top: 0px;
      }
    }
    .videoConText{
      height: 20%;
      width: 100%;
      .phoneTextBox{
        height: 100%;
        width: 100%;
        object-fit: contain;

      }
    }
  }
}
